<template>
  <div class="app-container rule">
    <!-- 筛选部分 -->
    <div class="app-container-hd">
      <div class="toolbar-search">
        <el-form ref="searchParams" :model="searchParams" :inline="true" size="mini" @keyup.enter.native="handleSearch">
          <el-form-item prop="mode" label="模板分类：">
            <el-select v-model="searchParams.mode" placeholder="请选择" clearable>
              <el-option :key="0" label="商品标签" value="goods_label" />
              <el-option :key="1" label="商品单据" value="goods_list" />
              <el-option :key="2" label="投标场次单据" value="bid_goods" />
              <el-option :key="3" label="标品出价单据" value="bid_goods_price" />
            </el-select>
          </el-form-item>
          <el-form-item label="模板名称:" prop="title">
            <el-input v-model="searchParams.title" placeholder="根据模板名称筛选" />
          </el-form-item>
          <el-form-item label="模板宽度:" prop="width">
            <el-input v-model="searchParams.width" placeholder="模板宽度" />
          </el-form-item>
          <el-form-item label="模板高度:" prop="height">
            <el-input v-model="searchParams.height" placeholder="模板高度" />
          </el-form-item>
          <div class="form-button">
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="handleSearch">筛选</el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-refresh" @click="handleSearch('searchParams', 'reset')">重置</el-button>
            </el-form-item>
          </div>
        </el-form>
      </div>

      <!-- 表格部分 -->
      <div v-loading="$store.state.app.loading" class="table-main fixed">
        <div class="table-top-button">
          <el-button icon="el-icon-plus" type="primary" size="mini" @click="handleOpenModal(null)">新增</el-button>
        </div>
        <el-table
          row-key="tpl_id"
          highlight-current-row
          :data="listData"
          :border="true"
          :stripe="true"
          :empty-text="$store.state.app.loading ? '正在加载数据' : null"
        >
          <el-table-column prop="tpl_id" label="ID" width="70" />
          <el-table-column prop="title" label="模板名称" />
          <el-table-column prop="width" label="模板宽度" width="80" />
          <el-table-column prop="height" label="模板高度" width="80" />
          <el-table-column prop="mode" label="所属分类" width="250">
            <template slot-scope="item">
              <span v-if="item.row['mode'] === 'goods_label'">商品标签</span>
              <span v-else-if="item.row['mode'] === 'goods_list'">商品单据</span>
              <span v-else-if="item.row['mode'] === 'bid_goods'">投标场次单据</span>
              <span v-else-if="item.row['mode'] === 'bid_goods_price'">标品出价单据</span>
            </template>
          </el-table-column>
          <el-table-column prop="tpl_desc" label="注释说明" min-width="160" />
          <el-table-column prop="created_at" label="创建时间" width="160" />
          <el-table-column prop="action" label="操作" width="200">
            <template slot-scope="item">
              <div class="button-group">
                <el-button type="text" size="mini" @click="handleOpenModal(item.row, true)">编辑</el-button>
                <el-button type="text" size="mini" @click="handleRowDelete(item.row)">删除</el-button>
                <el-button type="text" size="mini" @click="handleCopy(item.row)">复制</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <div class="app-container-ft">
      <paginate :total="searchParams.total" :per-page="searchParams.per_page" :page="searchParams.page" @paginate-change="handleSearch" />
    </div>
    <!-- 数据编辑弹窗 -->
    <box-save
      v-if="saveModal"
      :item-data="itemData"
      @on-cancel-modal="acceptCancelModal"
    />
  </div>
</template>

<script>
import boxSave from './components/save'
import Paginate from '@/components/Paginate/index'
import { destroy, info, paginate } from '@/api/print-tpl'

export default {
  components: { Paginate, boxSave },
  data: function() {
    return {
      listData: [],
      itemData: null,
      saveModal: false,
      isUpdate: false,

      searchParams: {
        mode: null,
        is_gratis: null,
        title: null,
        width: null,
        height: null,
        total: null,
        page: null,
        per_page: parseInt(process.env.VUE_APP_PER_PAGE)
      }
    }
  },
  mounted: function() {
    // 初始化方法
    this.initialize()
  },
  methods: {
    // 初始化数据列表
    initialize: function() {
      // 获取数据列表
      this.$store.commit('app/SET_LOADING', true)
      paginate(this.searchParams).then(res => {
        this.listData = res.data
        this.searchParams.total = Number(res['total'])
        this.searchParams.page = Number(res['current_page'])
        this.searchParams.per_page = Number(res['per_page'])
        this.$nextTick(function() {
          this.$store.commit('app/SET_LOADING', false)
        })
      })
    },
    // 根据条件筛选数据
    handleSearch: function(value, field) {
      // 重置表单数据
      if (field === 'reset') {
        this.searchParams.page = 1
        this.$refs[value].resetFields()
        // 页码参数变更
      } else if (field) {
        this.searchParams.page = 1
        this.searchParams[field] = value
      }
      this.initialize()
    },
    // 打开数据编辑窗口
    handleOpenModal: function(itemData) {
      if (itemData) {
        this.$store.commit('app/SET_LOADING', true)
        info(itemData['tpl_id']).then(res => {
          this.itemData = res.data
          this.saveModal = true
          this.$nextTick(function() {
            this.$store.commit('app/SET_LOADING', false)
          })
        })
      } else {
        this.saveModal = true
      }
    },
    handleCopy(itemData) {
      if (itemData) {
        this.$store.commit('app/SET_LOADING', true)
        info(itemData['tpl_id']).then(res => {
          this.itemData = res.data
          delete this.itemData['tpl_id']
          this.saveModal = true
          this.$nextTick(function() {
            this.$store.commit('app/SET_LOADING', false)
          })
        })
      }
    },
    // 关闭数据编辑窗口
    acceptCancelModal: function(refresh = false) {
      if (refresh === true) {
        this.initialize()
      }
      this.itemData = null
      this.saveModal = false
    },
    // 删除列表指定数据
    handleRowDelete: function(row) {
      this.$confirm('该操作将彻底删除该数据切无法恢复，确定要继续吗?', '提示', {
        distinguishCancelAndClose: false,
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            instance.confirmButtonText = '请稍等...'
            destroy(row['tpl_id']).then(function() {
              done()
              this.initialize()
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            }.bind(this)).catch(function() {
              instance.confirmButtonLoading = false
              instance.confirmButtonText = '确定'
            })
          } else {
            done()
            instance.confirmButtonLoading = false
            instance.confirmButtonText = '确定'
          }
        }
      })
    }
  }
}
</script>
